<template>
  <div class="main">
    <!-- <a-icon class="QRcodeIcon" :component="allIcon.QRcodeIcon"/> -->
    <a-form-model id="formLogin" ref="form" class="user-layout-login" :model="form" :rules="rules">
      <div v-if="userLoginType==true">
        <div class="userLoginSpringFrame">
          <div class="ul_close" @click="userLogin">
            <a-icon style="" type="close" />
          </div>
          <a-form-model-item prop="username">
            <a-input v-model="form.username" size="large" placeholder="账户: 123">
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)'}" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input-password v-model="form.password" size="large" placeholder="密码: admin123">
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input-password>
          </a-form-model-item>
          <a-row :gutter="16" v-if="captchaOnOff">
            <a-col class="gutter-row" :span="16">
              <a-form-model-item prop="code">
                <a-input
                  v-model="form.code"
                  size="large"
                  type="text"
                  autocomplete="off"
                  placeholder="验证码">
                  <a-icon
                    slot="prefix"
                    type="security-scan"
                    :style="{ color: 'rgba(0,0,0,.25)' }" />
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <img class="getCaptcha" :src="codeUrl" @click="getCode">
            </a-col>
          </a-row>
          <a-form-item>
            <div style="display: flex;width: 100%;position: relative;">
            </div>
          </a-form-item>
          <a-form-item style="margin-top:24px">
            <a-button
              size="large"
              type="primary"
              htmlType="submit"
              class="login-button"
              :loading="logining"
              :disabled="logining"
              @click="handleSubmit">确定</a-button>
          </a-form-item>
        </div>
      </div>
      <div class="selectLogin" v-if="userLoginType==false">
        <div class="sl_title">请选择登录方式</div>
        <a-button
          type="primary"
          shape="round"
          :size="size"
          class="calogin-type-button"
          :loading="logining"
          :disabled="logining"
          @click="LoginByComponents()">
          CA认证登录
        </a-button>
        <a-button
          type="primary"
          shape="round"
          :size="size"
          class="login-type-button"
          style="margin-top: 35px;"
          @click="userLogin">用户登录</a-button>
        <div style="width: 100%;position: relative;padding-top: 50px;">
          <div style="line-height: 30px;position: absolute;left: 15%;">
            <a-button type="link">技术支持</a-button>
          </div>
          <div style="line-height: 30px;position: absolute;right: 15%;">
            <a-button type="link">联系客服</a-button>
          </div>
        </div>
      </div>
    </a-form-model>
  </div>
</template>

<script>
	// import md5 from 'md5'
	import {
		mapActions
	} from 'vuex'
	import {
		timeFix
	} from '@/utils/util'
	import {
		getCodeImg,
		getBusinessConfig,
		SZWJ_LoginByComponents,
		ca
	} from '@/api/login'
	import allIcon from '@/core/icons'

	export default {
		components: {
			allIcon
		},
		data() {
			return {
				allIcon,
				codeUrl: '',
				form: {
					username: 'admin',
					password: 'admin123',
					code: undefined,
					uuid: ''
				},
				activeName: 'second',
				// radio值
				radioValue: 1,
				// 中间件基础配置参数
				dataForm: {},
				// 验证码开关
				captchaOnOff: true,
				// 是否打开用户登录
				userLoginType: false,
				size: 'large',
				rules: {
					username: [{
						required: true,
						message: '请输入帐户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				},
				logining: false
			}
		},
		created() {
			this.getCode()
			this.getBusinessConfig()
		},
		methods: {
			// -----------是否打开用户登录------------------------
			userLogin() {
				if (this.userLoginType === false) {
					this.userLoginType = true
				} else {
					this.userLoginType = false
				}
			},
			// --------------中间件配置数据----------------------
			getBusinessConfig() {
				getBusinessConfig().then(resp => {
					this.dataForm = resp.data
					// console.log(this.dataForm)
				})
			},
			// ---------------中间件登录接口----------------------
			LoginByComponents() {
				this.logining = true
				const dataForm = {
					businessOrgCode: this.dataForm.businessOrgCode,
					businessSystemAppID: this.dataForm.businessSystemAppID,
					businessSystemCode: this.dataForm.businessSystemCode
				}
				SZWJ_LoginByComponents(dataForm).then(res => {
					this.loading = false
					console.log('1111', res)
					if (res.eventMsg === '成功') {
						const data = {
							authority: res.eventValue.authority,
							boundValue: res.eventValue.boundValue,
							signCert: res.eventValue.signCert
						}
						this.ca(data)
							.then((res) => this.loginSuccess(res))
							.catch(err => this.requestFailed(err))
							.finally(() => {
								this.logining = false
							})
					} else if (res.eventMsg === '登录失败，用户取消登录') {
						this.logining = false
						this.$message.error('登录失败，用户取消登录')
					} else {
						this.logining = false
						this.$message.error(res.eventMsg)
					}
				}).catch(err => err)
			},
			// --------------code验证码--------------------------
			getCode() {
				getCodeImg().then(res => {
					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
					if (this.captchaOnOff) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.form.uuid = res.uuid
					}
				})
			},
			applyLicense() {
				window.open('/applyLicense', '_blank')
			},
			...mapActions(['Login', 'Logout', 'ca']),
			handleSubmit() {
				// 关闭登录过期的提示框
				this.$notification.close('loginExpireTip')
				this.logining = true
				this.$refs.form.validate(valid => {
					if (valid) {
						// console.log('1111', this.form)
						this.Login(this.form)
							.then((res) => this.loginSuccess(res))
							.catch(err => this.requestFailed(err))
							.finally(() => {
								this.logining = false
							})
					} else {
						setTimeout(() => {
							this.logining = false
						}, 600)
						if (this.captchaOnOff) {
							this.getCode()
						}
					}
				})
			},
			loginSuccess(res) {
				this.$router.push({
					path: '/'
				})
				// 延迟 1 秒显示欢迎信息
				setTimeout(() => {
					this.$notification.success({
						message: '欢迎',
						description: `${timeFix()}，欢迎回来`
					})
				}, 1000)
			},
			requestFailed(err) {
				// this.isLoginError = true
				// this.loginErrorInfo = err
				this.form.code = undefined
				this.getCode()
				this.$message.error(err)
			},
			handleCloseLoginError() {
				// this.isLoginError = false
				// this.loginErrorInfo = ''
			},
			radioChange(e) {
				console.log(this.radioValue)
			}
		}
	}
</script>

<style lang="less" scoped>

	.userLoginSpringFrame{
		padding: 10px 20px 20px 20px;
		border-radius: 20px;
		border: 1px dashed #62C3FF;
		margin-top: 40px;

		.ul_close{
			text-align: right;
			padding-bottom: 10px;
			cursor:pointer;
		}
	}

	.selectLogin{
		width: 100%;
		text-align: center;
		margin: 90px 0 30px 0;

		.sl_title{
			text-align: center;
			padding-bottom: 50px;
			font-size: 20px;
			color: #50a4fe;
		}
	}

	.QRcodeIcon {
		position: absolute;
		right: 0;
		font-size: 32px;
		color: #1890ff;
		margin-top: 5px;
		margin-right: 5px;
	}

	.ant-space-align-center {
		color: #8f959e;
		line-height: 30px;
		height: 30px;
	}

	.user-layout-login label {
		font-size: 12px !important;
	}

	.user-layout-login {
		label {
			font-size: 14px;
		}

		.ant-page-header {
			padding: 60px 0 45px 0;
		}

		.getCaptcha {
			display: block;
			width: 100%;
			height: 40px;
		}

		button.login-button {
			background-color: #1890ff !important;
			border-color: #1890ff !important;
			padding: 0 15px;
			font-size: 16px;
			height: 40px;
			width: 100%;
			border-radius: 4px;

			&:hover, &:focus {
				background-color: #55adfe !important;
				border-color: #55adfe !important;
			}
		}

		button.login-type-button {
			padding: 0 15px;
			font-size: 16px;
			height: 40px;
			width: 70%;
			border-radius: 20px;
			background-color: #13ce66;
			border-color: #13ce66;

			&:hover, &:focus {
				background-color: #4fde8f;
				border-color: #4fde8f;
			}
		}

		button.calogin-type-button {
			color: #fff;
			background-color: #1890ff !important;
			border-color: #1890ff !important;
			padding: 0 15px;
			font-size: 16px;
			height: 40px;
			width: 70%;
			border-radius: 20px;

			&:hover, &:focus {
				background-color: #55adfe !important;
				border-color: #55adfe !important;
			}
		}

		.icons-list {
			.anticon {
				font-size: 30px;
				width: 40px;
			}

			.dingtalk {
				color: #0089FF;
			}

			.WeChat {
				color: #51C332;
			}

			.Alipay {
				color: #06B4FD;
			}

			.Sina {
				color: #D81E06;
			}
		}
	}

	::v-deep .el-tabs__nav-scroll {
		width: 50% !important;
		margin: 0 auto !important;
	}

	/deep/ .el-tabs__nav-wrap::after {
		position: static !important;
	}
</style>
